import React, { useState } from 'react';
import {
  Box,
  Tabs,
  Tab,
  Grid,
  Card,
  CardMedia,
  CardContent,
  Typography,
  IconButton,
  Chip,
  TextField,
  InputAdornment,
} from '@mui/material';
import FavoriteIcon from '@mui/icons-material/Favorite';
import SearchIcon from '@mui/icons-material/Search';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

interface FavoriteGame {
  id: number;
  title: string;
  coverImage: string;
  price: string;
  tags: string[];
  isWishlist?: boolean;
}

// Mock data
const mockFavorites: FavoriteGame[] = [
  {
    id: 1,
    title: "艾尔登法环",
    coverImage: "https://via.placeholder.com/300x400",
    price: "¥298",
    tags: ["动作", "RPG", "开放世界"],
  },
  // ... 更多收藏游戏数据
];

const mockWishlist: FavoriteGame[] = [
  {
    id: 2,
    title: "星空",
    coverImage: "https://via.placeholder.com/300x400",
    price: "¥398",
    tags: ["RPG", "科幻", "开放世界"],
    isWishlist: true,
  },
  // ... 更多愿望单游戏数据
];

const TabPanel = (props: TabPanelProps) => {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`favorites-tabpanel-${index}`}
      aria-labelledby={`favorites-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ py: 3 }}>{children}</Box>}
    </div>
  );
};

const GameGrid: React.FC<{ games: FavoriteGame[], searchQuery: string }> = ({
  games,
  searchQuery,
}) => {
  const filteredGames = games.filter(game =>
    game.title.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <Grid container spacing={2}>
      {filteredGames.map((game) => (
        <Grid item key={game.id} xs={12} sm={6} md={4} lg={3}>
          <Card sx={{ height: '100%' }}>
            <Box sx={{ position: 'relative' }}>
              <CardMedia
                component="img"
                height="200"
                image={game.coverImage}
                alt={game.title}
              />
              <IconButton
                sx={{
                  position: 'absolute',
                  top: 8,
                  right: 8,
                  bgcolor: 'background.paper',
                  '&:hover': { bgcolor: 'action.hover' },
                }}
              >
                {game.isWishlist ? (
                  <ShoppingCartIcon />
                ) : (
                  <FavoriteIcon color="error" />
                )}
              </IconButton>
            </Box>
            <CardContent>
              <Typography variant="h6" gutterBottom>
                {game.title}
              </Typography>
              <Box sx={{ mb: 1 }}>
                {game.tags.map((tag) => (
                  <Chip
                    key={tag}
                    label={tag}
                    size="small"
                    sx={{ mr: 0.5, mb: 0.5 }}
                  />
                ))}
              </Box>
              <Typography variant="h6" color="primary">
                {game.price}
              </Typography>
            </CardContent>
          </Card>
        </Grid>
      ))}
    </Grid>
  );
};

const Favorites: React.FC = () => {
  const [tabValue, setTabValue] = useState(0);
  const [searchQuery, setSearchQuery] = useState('');

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setTabValue(newValue);
  };

  return (
    <Box>
      <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
        <Tabs
          value={tabValue}
          onChange={handleTabChange}
          aria-label="favorites tabs"
        >
          <Tab label="收藏的游戏" />
          <Tab label="愿望清单" />
        </Tabs>
      </Box>

      <Box sx={{ mb: 3 }}>
        <TextField
          fullWidth
          size="small"
          placeholder="搜索游戏..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            ),
          }}
        />
      </Box>

      <TabPanel value={tabValue} index={0}>
        <GameGrid games={mockFavorites} searchQuery={searchQuery} />
      </TabPanel>

      <TabPanel value={tabValue} index={1}>
        <GameGrid games={mockWishlist} searchQuery={searchQuery} />
      </TabPanel>
    </Box>
  );
};

export default Favorites;
